<script lang="ts">
    import type { DevelopIssueContent } from "$lib/api/board/board_draw_type";
    import type { AtomGitUser } from "$lib/api/git_provider/atomgit/common";
    import {
        list_issue,
        type AtomGitIssue,
    } from "$lib/api/git_provider/atomgit/issue";
    import {
        list_user_org,
        type AtomGitOrg,
    } from "$lib/api/git_provider/atomgit/org";
    import {
        list_org_repo,
        list_user_repo,
        type AtomGitRepo,
    } from "$lib/api/git_provider/atomgit/repo";
    import { get_self_info } from "$lib/api/git_provider/atomgit/user";

    interface Props {
        gitServId: string;
        accessToken: string;
        onSelect: (selIssue: DevelopIssueContent) => void;
    }

    let props: Props = $props();

    let userInfo = $state(null as null | AtomGitUser);
    let orgList = $state([] as AtomGitOrg[]);
    let curOwnerPath = $state("");
    let repoList = $state([] as AtomGitRepo[]);
    let curRepo = $state(null as null | AtomGitRepo);
    let issueList = $state([] as AtomGitIssue[]);
    let selIssueNum = $state(0);

    async function loadUserInfo() {
        const res = await get_self_info(props.accessToken);
        userInfo = res;
        if (curOwnerPath == "") {
            curOwnerPath = res.login;
        }
    }

    async function loadOrgList() {
        const res = await list_user_org(props.accessToken);
        orgList = res;
    }

    async function loadRepoList() {
        repoList = [];
        curRepo = null;
        if (curOwnerPath == "" || userInfo == null) {
            return;
        }
        if (curOwnerPath == userInfo.login) {
            const res = await list_user_repo(
                props.accessToken,
                userInfo.login,
                100,
                0,
            );
            repoList = res;
        } else {
            const res = await list_org_repo(
                props.accessToken,
                curOwnerPath,
                100,
                0,
            );
            repoList = res;
        }
        if (repoList.length > 0) {
            curRepo = repoList[0];
        }
    }

    async function loadIssueList() {
        issueList = [];
        if (curRepo == null) {
            return;
        }
        const pathNames = curRepo.full_name.split("/");
        if (pathNames.length != 2) {
            return;
        }
        const res = await list_issue(
            props.accessToken,
            curOwnerPath,
            pathNames[1],
            {
                sort: "updated",
                direction: "desc",
                page: 0,
                per_page: 100,
            },
        );
        issueList = res;
        console.log(issueList);
    }

    $effect(() => {
        if (props.accessToken != "" && props.gitServId != "") {
            loadUserInfo();
            loadOrgList();
        }
    });

    $effect(() => {
        if (curOwnerPath != "") {
            loadRepoList();
        }
    });

    $effect(() => {
        if (curRepo != null) {
            loadIssueList();
        }
    });
</script>

<div class="h-[calc(100vh-400px)] flex">
    <div class="w-[200px] border-r-2 border-surface-300-700 p-1">
        <select
            class="select rounded-none bg-surface-100-900"
            bind:value={curOwnerPath}
        >
            <option value={userInfo?.login ?? ""}>当前用户</option>
            {#each orgList as org}
                <option value={org.login}>组织:{org.login}</option>
            {/each}
        </select>
        <div class="h-[calc(100vh-450px)] overflow-y-auto">
            {#each repoList as repo}
                <button
                    type="button"
                    class="{curRepo?.id == repo.id
                        ? 'bg-surface-400-600'
                        : ''} hover:bg-surface-400-600 mb-1 p-1 rounded-[10px] block w-full text-left"
                    onclick={() => (curRepo = repo)}
                >
                    {repo.name}
                </button>
            {/each}
        </div>
    </div>
    <div class="flex-1 p-1 h-[calc(100vh-400px)] overflow-y-auto table-wrap">
        <table class="table">
            <thead>
                <tr>
                    <th class="w-[40px]"></th>
                    <th class="w-[60px]">编号</th>
                    <th>名称</th>
                    <th class="w-[80px]">状态</th>
                </tr>
            </thead>
            <tbody>
                {#each issueList as issue}
                    <tr>
                        <td>
                            <input
                                class="radio"
                                type="radio"
                                checked={issue.number == selIssueNum}
                                onchange={(e) => {
                                    if (e.currentTarget.checked) {
                                        selIssueNum = issue.number;
                                        if (curRepo != null) {
                                            const pathNames =
                                                curRepo.full_name.split("/");
                                            if (pathNames.length == 2) {
                                                props.onSelect({
                                                    git_serv_id:
                                                        props.gitServId,
                                                    owner_path: curOwnerPath,
                                                    repo_path: pathNames[1],
                                                    issue_number: `${issue.number}`,
                                                });
                                            }
                                        }
                                    }
                                }}
                            />
                        </td>
                        <td>{issue.number}</td>
                        <td>{issue.title}</td>
                        <td>{issue.state}</td>
                    </tr>
                {/each}
            </tbody>
        </table>
    </div>
</div>
